<template>
  <!-- artivles.vue 专用组件 -->
  <div class="container">
    <el-dialog
      :visible="showDialog"
      :title="modifyId ? '修改文章' : '新增文章'"
      @close="closeClick"
    >
      <el-form
        ref="titleForm"
        :model="titleForm"
        label-position="left"
        label-width="100px"
      >
        <el-form-item
          label="文章标题"
          prop="title"
          :rules="[
            { required: true, message: '请输入文章标题', trigger: 'blur' }
          ]"
        >
          <el-input placeholder="请输入文章标签" v-model="titleForm.title" />
        </el-form-item>
        <!-- 富文本编辑器组件 -->
        <el-form-item
          prop="articleBody"
          :rules="[
            { required: true, message: '请输入文章内容', trigger: 'blur' }
          ]"
        >
          <quill-editor v-model="titleForm.articleBody"></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址:">
          <el-input placeholder="请输入视频地址" v-model="titleForm.videoURL" />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button @click="closeClick">取消</el-button>
        <el-button type="primary" @click="addSkill">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { add, detail, update} from "@/api/hmmm/articles";
export default {
  props: {
    showDialog: {
      type: Boolean,
      require: true
    }
  },
  data() {
    return {
      titleForm: {
        title: "",
        articleBody: "",
        videoURL: ""
      },
      modifyId: "",
      titleName: '新增文章'
    };
  },
  methods: {
    async modify(id) {
      if (id) {
        console.log(1);
        this.modifyId = id;
        const { data } = await detail({ id });
        //  console.log(data);
        this.titleForm = data;
        // this.titleName = '修改文章'
      }
    },
    async addSkill() {
      await this.$refs.titleForm.validate();
      // console.log(111);
      if (this.modifyId) {
        await update(this.titleForm)
        this.$message.success("修改成功");
      } else {
        await add(this.titleForm);
        this.$message.success("添加成功");
      }
      this.$parent.getList();
      this.closeClick();
    },
    async closeClick() {
      await this.$refs.titleForm.resetFields();
      this.titleForm = {
        title: "",
        articleBody: "",
        videoURL: ""
      };
      this.$parent.showDialog = false;
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .ql-editor {
  min-height: 200px;
}
</style>
